import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Descriptions } from 'antd';
import React from 'react';
import { history, useParams } from 'umi';

const UserDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  
  // 模拟用户数据
  const user = {
    id: id,
    username: 'admin',
    name: '管理员',
    email: 'admin@example.com',
    status: 'active',
    createTime: '2023-01-01',
    lastLoginTime: '2023-05-20',
  };

  return (
    <PageContainer
      header={{
        title: '用户详情',
        onBack: () => history.back(),
        extra: [
          <Button 
            key="edit" 
            type="primary" 
            onClick={() => history.push(`/user/edit/${id}`)}
          >
            编辑
          </Button>,
        ],
      }}
    >
      <Card>
        <Descriptions bordered column={1}>
          <Descriptions.Item label="用户ID">{user.id}</Descriptions.Item>
          <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
          <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{user.email}</Descriptions.Item>
          <Descriptions.Item label="状态">
            <span style={{ color: user.status === 'active' ? 'green' : 'red' }}>
              {user.status === 'active' ? '启用' : '禁用'}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{user.createTime}</Descriptions.Item>
          <Descriptions.Item label="最后登录时间">{user.lastLoginTime}</Descriptions.Item>
        </Descriptions>
      </Card>
    </PageContainer>
  );
};

export default UserDetailPage;
